@mixin p-distro-banner {
  $color-transparent-white: rgba(255, 255, 255, 0);

  .distro-banner {
    position: relative;
  }

  .distro-banner > * {
    // make sure child elements render on top of absolutely positioned background
    position: relative;
  }

  .distro-banner .p-card--highlighted {
    padding: 3rem;
  }

  .distro-banner .is-light {
    color: $color-light;
  }

  .distro-banner__background {
    min-height: 700px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  .distro-banner__suru {
    bottom: 0;
    min-width: 1440px;
    position: absolute;
    width: 100%;
  }

  .details-block {
    margin-bottom: 2rem;
  }

  .snap-description-collapsed {
    height: 180px;
    overflow: hidden;
  }

  .snap-description-more {
    background: linear-gradient($color-transparent-white, $color-x-light 80%);
    bottom: 2rem;
    height: 180px;
    left: 2rem;
    padding-top: 10rem;
    position: absolute;
    right: 2rem;
  }

  .distro-banner__logo {
    float: right;
    width: 7rem;
  }

  @media only screen and (min-width: $breakpoint-medium) {
    .distro-code-snippet {
      // to align code snippet with paragraph of text in column next to it
      padding-top: .5rem;
    }
  }

}
